<!-- 首页 -->
<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="false"><block slot="content">动态</block></cu-custom>
		<!-- <u-notice-bar mode="horizontal" :list="list"></u-notice-bar> -->
		<view class="top-box">
			<view class="u-tabs-box">
				<u-tabs :list="tabs" :is-scroll="false" :current="tabIndex" @change="tabsChange"></u-tabs>
			</view>
			<view class="send-box" @click="notice">
				<view class="bell">
					<u-icon name="bell"></u-icon>
					<view class="tab-btn-dot" v-if="notice_num > 0">{{notice_num}}</view>
				</view>
			</view>
		</view>
		<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
			<swiper-item>
				<last @menu="menu" ref="last" :i="0" :index="tabIndex" :height="height"></last>
			</swiper-item>
			<swiper-item>
				<topic @menu="menu" ref="topic" :i="1" :index="tabIndex" :height="height"></topic>
			</swiper-item>
			<!-- <swiper-item>
				<fans @menu="menu" ref="fans" :i="2" :index="tabIndex" :height="height"></fans>
			</swiper-item> -->
		</swiper>
		<view class="fabu" @click="fabu">
			<u-icon name="edit-pen-fill"></u-icon>
		</view>
		<user-auth></user-auth>
		<u-action-sheet :list="sheetList" v-model="sheetShow" @click="clickSheet"></u-action-sheet>
		<f-tabbar></f-tabbar>
	</view>
</template> 

<script>
import base from '@/config/baseUrl.js';
import topic from "./topic.vue"; // 圈子
import fans from "./fans.vue"; // 关注
import last from "./last.vue"; // 关注
import fTabbar from '@/components/f-tabbar/f-tabbar';
export default {
	components: {
		topic,
		fans,
		last,
		fTabbar
	},
	data() {
		return {
			background: {
				backgroundImage: 'linear-gradient(45deg, #c6eaf8, rgb(230 175 251 / 79%))'
			},
			systemInfo: base.systemInfo,
			height: "", // 需要固定swiper的高度
			tabs: [{
				name: '最新'
			}, {
				name: '推荐'
			}],
			i: 0,
			tabIndex: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			list: [
				'禁止发布违规内容',
				'禁止发布联系方式',
				'如有发现封号处理',
			],
			sheetList: [],
			sheetShow: false,
		};
	},
	onLoad() {
		this.init();
	},
	onShow() {
		this.$u.get('/system/config/getChatValue',{
			appId: this.website.appId,
			userId: this.vuex_user.userId,
		}).then(res => {
			this.$u.vuex('chat_flag', res.data);
			this.vuex_tabbarList[0].show = res.data;
			this.vuex_tabbarList[2].show = res.data;
			this.$u.vuex('vuex_tabbarList', this.vuex_tabbarList);
		});
		this.checkVersion();
	},
	methods: {
		init() {
			// 需要固定swiper的高度
			// #ifndef MP-ALIPAY
			this.height = (uni.getSystemInfoSync().screenHeight - this.systemInfo.navBarH - this.systemInfo.tabbarH - 40) + 'px'
			// #endif
		},
		tabsChange(index) {
			this.tabIndex = index;
		},
		// 轮播菜单
		swiperChange(e){
			this.tabIndex = e.detail.current
		},
		menu(e) {
			this.sheetList = e;
			this.sheetShow = true;
		},
		notice() {
			this.judgeLogin(() => {
				this.$u.route({
					url: 'packgeMine/pages/index/notice',
				});
			});
		},
		fabu() {
			this.$u.route({
				url: 'pages/me/publish',
			});
		},
		checkVersion() {
			if (uni.getUpdateManager) {
				const updateManager = uni.getUpdateManager();
				updateManager.onUpdateReady(function(res) {
				    uni.showModal({
				        title: "更新提示",
				        content: "检测到新版本，是否下载新版本并重启小程序？",
				        success(res) {
				            if (res.confirm) {
				                // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
				                updateManager.applyUpdate();
				            }
				        }
				    });
				});
				updateManager.onUpdateFailed(function(res) {
				    // 新的版本下载失败
				    uni.showModal({
				        title: "已经有新版本了哟~",
				        content: "新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~",
				        showCancel: false
				    });
				});
			}
		},
		clickSheet(index) {
			var sheet = this.sheetList[index];
			switch (this.tabIndex){
				case 0:
				    this.$refs.last.clickSheet(sheet);
					break;
				case 1:
					this.$refs.topic.clickSheet(sheet);
					break;
				default:
					this.$refs.fans.clickSheet(sheet);
					break;
			}
		},
	}
};
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.top-box {
		display: flex;
		background-color: #fff;
		align-items: center;
		height: 40px;
	}
	.u-tabs-box {
		width: 200rpx;
	}
	.send-box {
		display: flex;
		height: 40px;
		justify-content: center;
		align-items: center;
		right: 0;
		width: 40px;
		position: absolute;
		font-size: 44rpx;
	}
	
	.send-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px 10px;
		background-color: #2b85e4;
		border-radius: 20px;
		color: #fff;
	}
	.send-btn-text {
		font-size: 24rpx;
		margin-left: 5px;
	}
	.bell{
		position: relative;
	}
	.tab-btn-dot {
		background-color: #fa8206;
		position: absolute;
		top: 6rpx;
		right: -3px;
		z-index: 9;
		border-radius: 100%;
		font-size: 6px;
		padding: 15rpx;
		color: #fff;
		height: 10rpx;
		width: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.fabu {
		background-color: #a569d9;
		position: fixed;
		bottom: 340rpx;
		right: 20rpx;
		border-radius: 100%;
		height: 72rpx;
		width: 72rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
	}
</style>
